{include file="common/head"}
<head>
<title>消息</title>

<style type="text/css">
    html{height: 100%;}
    #top{background:#f60 ;color: white;border-bottom:1px solid rgba(0,0,0,0.1);max-width: 500px;}
    .mb-3{margin-bottom:0!important;}

    .answer,.my_msg{border: 1px solid rgba(0, 0, 0, 1.0);margin: 10px 0;padding: 5px;position: relative;}
    .my_msg{background-color: #0fc;margin-left: 25%;border-radius:10px 10px 0px 10px;overflow: visible;}
    .answer{background-color: #fc0;margin-right: 25%;border-radius: 0px 10px 10px 10px;}
    #content,#msg_send,#cust_list{width:480px;position: fixed;background: #fff;border: 1px solid #555;box-shadow: 0 0 3px #777;margin: 10px;}

    #cust_list{bottom: 115px;padding:0 10px;margin: 10px;width: 140px;} 
    .cust{border-bottom: 1px solid #ccc;padding: 2px 0;position: relative;}
    .cust_sel{color:blue;font-weight:bold}
    .bi-x{position: absolute;right: 10px;}
    .price{position: absolute;top:0;right:-10px;background: red;color:white;width:20px;height: 20px;border-radius: 50%;text-align: center;}

</style>    
</head>
<body style="">
  <div id="header"></div>
  <div id="top" class="row text-center" style="height: 50px;">
    <div class="col-2 text-center">
      <span class="bi-chevron-left btn-back"></span>
    </div>
    <div class="col-8 text-center">Chat message</div>
    <div class="col-2 text"></div>
  </div>

    <div style="height: 50px;"></div>
    <div class="container-fluid" >
      <input type="hidden" id="uid" value="{$uid}"/>
      <input type="hidden" id="kf" value="{$kf}"/>

      <div id="content" style="top:50px;left:0;right:0;bottom:115px;overflow-y: scroll;">

      </div>


      <div id="msg_send" style="left:0;right:0;bottom:0px;padding: 3px;">
        <div class="input-group">
          <input type="hidden" id="to_id" value="{$to_id}" />
          <button class="btn show_kf"><span class="bi-people-fill">Talk to</span></button>
          <input type="text" class="" id="to_id_name" value="{$to_id_name}" placeholder="" style="border:0;" readonly />
<!--           <span id="search" class="input-group-text bi-search btn-secondary" >&nbsp;</span> -->
        </div>
        <div class="input-group" style="border-radius: 10px;overflow: hidden;" >
          <textarea id="msg" class="form-control" style="font-weight: bold;color:#00f;"></textarea>
          <span id="send" class="input-group-text bi-check-lg btn-primary" >&nbsp;</span>

        </div> 
      </div>

    </div>

    <div id="cust_list" style="">
      
    </div>



<script type="text/javascript">
$(document).ready(function(){

    $(".btn-back").on('click',function(){
        window.history.back();
    })

    $(".bi-search").on('click',function(){
      //get_cust();
    })

    $("#to_id_name,.show_kf").on('focus',function(){
      $("#cust_list").show();
    });


    function get_msg_group(){
      $.post('/index.php/msg/msg_group',{kf:$("#kf").val()},function(res){
        res=JSON.parse(res);
        console.log(res);
        if(res.code){
          var cust ="<div>&nbsp;<span class='bi-x' id='close_cust_list'></span></div>";
          for(i in res.data){

            cust+="<div class='cust' name='"+res.data[i].customer_name+"'>";
            cust+="<span class='bi-heart'></span>"+res.data[i].customer_name;
            cust+="<c class='price'>"+res.data[i].cnt+"</c>";

            cust+="</div>";
          }
          $("#cust_list").html(cust);

        }

      })
    }
    get_msg_group();

    $("#cust_list").on('click','.cust',function(res){
      var cust =$(this);
      $(".cust").removeClass('cust_sel');
      cust.addClass('cust_sel');
      $("#to_id_name").val(cust.attr('name'));
      get_cust();
      $("#cust_list").hide();
      get_msg();

    })

    $("#cust_list").on('click','#close_cust_list',function(res){
      $("#cust_list").hide();
    })    




    //find out somebody to talk
    function get_cust(){
      var to_id = $("#to_id").val();
      var to_id_name = $("#to_id_name").val();
      
      if(!to_id_name) {
        layer.msg('输入用户名/手机号 查找!');
        return 0;
      }
      var post={id:'',nameOrMobile:to_id_name};

      $.post('/index.php/customer/getOne',post,function(res){
          var res=JSON.parse(res);
          console.log(res);
          if(res.code && res.data){
            layer.msg('Talk to '+res.data.name+ " now.");
            $("#to_id").val(res.data.id);
            $("#to_id_name").val(res.data.name);
            get_msg();
          }else{
            layer.msg(res.msg);
          }
      })
    }


    get_msg();

    $("#content").on('click','.bi-x',function(e){
      var msg_id = $(this).attr('mid');
      console.log(msg_id);
      if(!msg_id){
        return;
      }
      var el = $(this).parent();
      $.post('/index.php/msg/msg_remove',{id:msg_id},function(res){
        var res = JSON.parse(res);
        if(res.code){
          el.remove();
        }
      })
    })

    var last_msg_length=0; //记住上一次的消息数，做对比
    function get_msg(){
      var uid=$("#uid").val();
      var to_id=$("#to_id").val();

      if(!to_id) {
        layer.msg('Choose someone to talk to..');
        return;
      }
      if(to_id==uid){
        layer.msg("Don't talk to yourself!");
        return;
      }
      $.post('/index.php/msg/msg',{ajax:1,to_id:to_id},function(res){
          var res=JSON.parse(res);

          if(!res.code) {
            $("#content").html('');
            layer.msg(res.msg);
            return;
          }

          var msg_list='';
          for(i in res.data){
            var m =res.data[i];

            if(m.from_id==uid){
              var css='my_msg';
              var msg="<div class='"+css+"'><span class='bi-x' mid='"+m.id+"'></span>";
              msg+="<div><c style='font-size:small;'>"+m.create_time+"</c> </div>"; ;
            }else{
              var css="answer";
              var msg="<div class='"+css+"'><span class='bi-x' mid='"+m.id+"'></span>";              
              msg+="<div><span class='bi-chat' from_id='"+m.to_id+"'></span>"+m.from_id_name+",<c style='font-size:small;'>"+m.create_time+"</c></div>";
            }

            msg+="<div style='color:blue;'>"+m.content+"</div></div>";
            msg_list+=msg;
          }
          $("#content").html(msg_list);

          var ele = document.getElementById('content'); 
          ele.scrollTop = ele.scrollHeight; 

          //设置已读
          if(res.data.length!=last_msg_length){
            last_msg_length = res.data.length;
            console.log(last_msg_length);
            $.post('/index.php/msg/set_readed',{to_id:to_id},function(res2){
              var res2=JSON.parse(res2);
            });
          }else{
            console.log('No nore new messages!');
          }


      })      
    }

    setInterval(get_msg,10000)

    $("#send").on('click',function(){
      var msg = $("#msg").val();
      var to_id = $("#to_id").val();
      if(!msg){
        layer.msg('what?');return;
      } 
      if(!to_id){
        layer.msg('请先查找接收人');
        return;
      }

      $.post('/index.php/msg/msg',{ajax:2,to_id:to_id,content:msg},function(res){
        var res=JSON.parse(res);
        console.log(res);
        get_msg();
        $("#msg").val('');
      })
    })

})


</script>


</body>
</html>
